<template>
<continer class="executeList" :shadow="false">
    <template slot="search">
      <div class="detail">
      <el-row>
        <el-col :span="4" class="col">
          <span class="list-tit">总数</span>
          <span>{{ taskData.total }}</span>
        </el-col>
        <el-col :span="4" class="col"
          ><span class="list-tit">执行数</span> <span>{{ taskData.called }}</span></el-col
        >
        <el-col :span="4" class="col"
          ><span class="list-tit">接通数</span>
          <span>{{ taskData.dealing }}</span></el-col
        >
        <el-col :span="4" class="col"
          ><span class="list-tit">呼叫总次数</span>
          <span>{{ taskData.callout }}</span></el-col
        >
        <el-col :span="4" class="col"
          ><span class="list-tit">执行率</span>
          <span>{{getProcess(taskData)}}%</span></el-col
        >
        <el-col :span="4" class="col"
          ><span class="list-tit">接通率</span>
          <span>{{getConnectionRate(taskData)}}%</span></el-col
        >
      </el-row>
    </div>
    </template>
    <template slot="oprate">
      <el-button type="primary" size="mini" @click="getExecuteData">刷新</el-button>
    </template>
    <template slot="content">
      <configTable
        :headers="tableHeaders"
        :data="tableData"
        :pagingData="pagingData"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
        @checkHeadersChange="checkHeadersChange"
        v-loading="showLoading"
        :headersConfig="false"
        ref="configTabel"
      >
        <template slot="column">
          <template v-for="(item, index) in checkHeaders">
            <u-table-column
              :resizable="false"
              :prop="item.prop"
              :label="item.label"
              :key="item.label + index"
              :sortable="item.sortable"
              :show-overflow-tooltip="true"
              v-if="
                item.prop !== 'progress' &&
                item.prop !== 'progressRate' &&
                item.prop !== 'connectionRate'
              "
            >
            </u-table-column>
            <u-table-column
              :label="item.label"
              v-if="item.prop === 'progress' && item.show"
              :key="item.label + index"
              :sortable="item.sortable"
            >
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <span>{{ getFormat(scope.row) }}</span>
                </div>
              </template>
            </u-table-column>
            <u-table-column
              :label="item.label"
              v-if="item.prop === 'progress' && item.show"
              :key="item.label + index"
              :sortable="item.sortable"
            >
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <span>{{ getProcess(scope.row) }}%</span>
                </div>
              </template>
            </u-table-column>
            <u-table-column
              :label="item.label"
              v-if="item.prop === 'connectionRate' && item.show"
              :key="item.label + index"
              :sortable="item.sortable"
            >
              <template slot-scope="scope">
                {{ getConnectionRate(scope.row) }}%
              </template>
            </u-table-column>
          </template>
        </template>
      </configTable>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue, Prop, Mixins } from 'vue-property-decorator'
import configTable from '@/components/configCommon/table.vue'
import { IvrModule } from '@/store/modules/config/ivr'
import { ElMessage } from 'element-ui/types/message'
import { ElMessageBoxShortcutMethod } from 'element-ui/types/message-box'
import { Store } from 'vuex/types'
import { IvrData, PagingData, TabelHeaders } from '../types/index'

import editOrAdd from '../previewEditorAdd/index.vue'
import priviewDetails from '../previewDetails/index.vue'

import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'

import taskMixin from '../common/task-mixin'
@Component({
  name: 'ServiceNumber',
  components: { configTable, editOrAdd, priviewDetails, continer }
})
export default class extends Mixins(taskMixin) {
  @Prop({ default: {} }) private data: any
  private $confirm: ElMessageBoxShortcutMethod | undefined
  private showLoading: boolean = false

  private taskData: any = {}

  private currentPage = 'editOrAdd'

  private isShowPage (page: string) {
    return this.currentPage === page
  }

  private mounted (): void {
    console.log(this.data, 23333)
    this.getExecuteData()
  }

  private getExecuteData () {
    this.getIvrList()
    this.getTaskInfo()
  }

  // 详情控制
  private showPage: boolean = false

  private pagingData: PagingData = { total: 0, limit: 10, page: 1 }

  private tableHeaders: TabelHeaders[] = [
    {
      label: '座席名称',
      prop: 'name'
    },
    {
      label: '执行进度',
      prop: 'progress'
    },
    {
      label: '执行率',
      prop: 'progressRate'
    },
    {
      label: '接通数',
      prop: 'dealing'
    },
    {
      label: '接通率',
      prop: 'connectionRate'
    },
    {
      label: '呼叫次数',
      prop: 'callout'
    },
    {
      label: '参与外呼任务时间',
      prop: 'firstCallTime',
      sortable: true
    }
  ]

  private checkHeaders: TabelHeaders[] = []
  private tableData: IvrData[] = []

  private pageChange (page: number): void {
    this.pagingData.page = page
    this.getIvrList()
  }

  private handleDeleteById (row: any) {
    const taskId = row._id
    this.handleDelete(taskId).then((success) => {
      if (success) {
        this.getIvrList()
      }
    })
  }

  private pageSizeChange (size: number): void {
    this.pagingData.page = 1
    this.pagingData.limit = size
    this.getIvrList()
  }

  private changeState (row: any, status: string) {
    const taskId = row._id
    const oldStatus = row.status
    row.status = status
    this.updateTaskState(taskId, status).then((success) => {
      if (!success) {
        row.status = oldStatus
      }
    })
  }

  private checkHeadersChange (checkList): void {
    this.$set(this, 'checkHeaders', checkList)
  }

  private getIvrList (): void {
    this.showLoading = true
    const actionData = Object.assign({ limit: this.pagingData.limit, page: this.pagingData.page }, { taskId: this.data._id, account: this.account })
    const data = { url: '/call/action/task/user/list', method: 'POST', data: actionData }
    IvrModule.IvrCommonAction(data).then((res: any) => {
      const resList = res.data.list || []
      this.tableData = resList
      this.pagingData.total = res.data.count || 0
      this.showLoading = false
    })
  }

  private getTaskInfo () {
    const actionData = Object.assign({ _id: this.data._id })
    const data = { url: '/call/action/task/search', method: 'POST', data: actionData }
    IvrModule.IvrCommonAction(data).then((res: any) => {
      if (res.success) {
        this.taskData = res.data
      }
    })
  }
}
</script>
<style lang='stylus'>
  .executeList
    .search-box
      width 100%
</style>

<style lang="stylus" scoped>
.executeList
  height 100%
.tabel
  height calc(100% - 56px)
.detail
  height 40px
  width 100%
  margin-bottom 24px
  .col
    display flex
    flex-direction column
    font-weight bold
    font-size 24px
    color #303753
    .list-tit
      font-size 12px
      color #767E91
      margin-bottom 5px
</style>
